<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./libs/layui/css/modules/layer/default/layer.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/art-template/template-web.js"></script>
    <script src="./libs/layui/lay/modules/layer.js"></script>
    <script id="art_list" type="text/html">
      {{each data}}
        
      <tr>
        <td>{{$value.name}}</td>
        <td>{{$value.slug}}</td>
        <td class="text-center">
            <button class="edit btn btn-info btn-xs" onclick="open_edit_modal({{$value.id}})">编辑</button>
            <button class="btn btn-danger btn-xs" onclick="del_data({{$value.id}})">删除</button>
        </td>
    </tr>

      {{/each}}
    </script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章类别管理
        </div>
        <div class="container-fluid common_con">
            <div class="row" style="margin-top: 10px;">
                <div
                    class="col-xs-offset-10 col-sm-offset-10 col-md-offset-10 col-lg-offset-10 col-xs-2 col-sm-2 col-md-2 col-lg-2">
                    <button class="btn btn-success" id="xinzengfenlei" data-toggle="modal"
                        data-target="#myModal">新增分类</button>
                </div>
            </div>

            <table class="table table-striped table-bordered table-hover mp20 category_table">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>描述</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>爱生活</td>
                        <td>热爱生活</td>
                        <td class="text-center">
                            <a href="javascript:void(0)" class="edit btn btn-info btn-xs">编辑</a>
                            <a href="javascript:void(0)" class="btn btn-danger btn-xs">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- 新增分类布局区域-开始 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增分类</h4>
                </div>
                <div class="modal-body">
                    <form id="addform">
                        <div class="add_category">
                            <div class="form-group">
                                <label for="name">分类名</label>
                                <input type="text" class="form-control" required name="name" placeholder="分类名">
                            </div>
                            <div class="form-group">
                                <label for="slug">分类别名</label>
                                <input type="text" class="form-control" required name="slug" placeholder="分类别名">
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                            <button type="submit" class="btn btn-primary btn_opt">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 新增分类布局区域-结束 -->

    <!-- 编辑分类布局区域-开始 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑分类</h4>
                </div>
                <div class="modal-body">
                    <form id="editform">
                        <div class="add_category">
                            <div class="form-group">
                                <label for="name">分类名</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="分类名">
                            </div>
                            <div class="form-group">
                                <label for="slug">分类别名</label>
                                <input type="text" class="form-control" name="slug" id="slug" placeholder="分类别名">
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                            <button type="submit" class="btn btn-primary btn_opt">保存</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <!-- 编辑分类布局区域-结束 -->

    <script>
        $(function () {
            // 1.0 调用获取分类列表数据方法
            getList();

            // 2.0 给新增表单注册submit事件，并执行新增数据逻辑
            register_submit_for_addform();

            // 3.0 注册
            register_submit_event_for_editform();
        })

        // 1.0 获取分类列表数据
        let index = null;
        function getList() {
            index = layer.load();

            $.ajax({
                type: 'GET',
                url: 'http://localhost:8080/api/v1/admin/category/list',
                headers: {
                    Authorization: localStorage.getItem('bigNews_token')
                },
                success: function (resData) {
                    layer.close(index);
                    let trHtml = template('art_list', resData);
                    $('tbody').html(trHtml);
                }
            })
        }


        // 新增分类
        // 2.0 给新增表单注册submit事件，并执行新增数据逻辑
        function register_submit_for_addform() {
            $('#addform').on('submit', function (e) {
                //index = layer.load();

                // 1.0 阻止表单默认提交行为
                e.preventDefault();

                // 2.0 获取表单中所有元素值
                let params = $(this).serialize();

                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:8080/api/v1/admin/category/add',
                    data: params,
                    headers: {
                        Authorization: localStorage.getItem('bigNews_token')
                    },
                    success: function (resData) {
                        if (resData.code !== 200) {
                            layer.msg(resData.msg, {
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            });
                            return;
                        }

                        // 提示用户新增成功
                        layer.msg('新增成功', {
                            time: 500 //500毫秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            $('#myModal').modal('hide');
                            document.querySelector('#addform').reset();
                            getList();
                        });
                    }
                })

            })
        }

        // 3.0 编辑分类数据
        // 3.0.1 给编辑按钮点击后触发此事件
        let category_id_global;

        function open_edit_modal(category_id) {
            // 将当前点击分类id保存到全局变量category_id_global中   
            category_id_global = category_id;

            // 打开编辑面板
            $('#editModal').modal('show');

            // 获取当前分类id对应的数据
            $.ajax({
                type: 'get',
                url: 'http://localhost:8080/api/v1/admin/category/search',
                data: { id: category_id },
                headers: {
                    Authorization: localStorage.getItem('bigNews_token')
                },
                success: function (resData) {
                    if (resData.code !== 200) {
                        layer.msg(resData.msg, {
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        });
                        return;
                    }

                    let data = resData.data[0];
                    $('#name').val(data.name);
                    $('#slug').val(data.slug);
                }
            })
        }

        // 3.0.2编辑表单注册submit事件
        function register_submit_event_for_editform() {
            $('#editform').on('submit', function (e) {
                e.preventDefault();
                let newdata = $(this).serialize();
                newdata += '&id=' + category_id_global;
                $.ajax({
                    type: 'post',
                    url: 'http://localhost:8080/api/v1/admin/category/edit',
                    data: newdata,
                    headers: {
                        Authorization: localStorage.getItem('bigNews_token')
                    },
                    success: function (resData) {
                        if (resData.code !== 200) {
                            layer.msg(resData.msg, {
                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                            });
                            return;
                        }

                        layer.msg(resData.msg, { time: 1000 }, function () {
                            $('#editModal').modal('hide');
                            getList();
                        })
                    }
                })

            })
        }

        // 4.0 删除事件
        function del_data(category_id) {
            $.ajax({
                type: 'post',
                url: 'http://localhost:8080/api/v1/admin/category/delete',
                data: { id: category_id },
                headers: {
                    Authorization: localStorage.getItem('bigNews_token')
                },
                success: function (resData) {
                    layer.msg(resData.msg, { time: 500 }, function () {
                        getList();
                    })
                },
                error: function (xhr) {
                    layer.msg(xhr.responseJSON.msg, {
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                }
            })
        }
    </script>
</body>

</html>